<template>
  <div>
    <van-nav-bar
      title="影院"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <van-icon name="arrow-left" color="black" /><span
          style="color: black"
          >{{ cityName }}</span
        >
      </template>
      <template #right>
        <van-icon name="search" color="black" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="dropdownMenu.district"
        :options="districtList"
        @change="districtChange(dropdownMenu.district)"
      />
      <van-dropdown-item
        v-model="dropdownMenu.getTicketMethod"
        :options="getTicketMethods"
      />
      <van-dropdown-item v-model="dropdownMenu.recent" :options="recents" />
    </van-dropdown-menu>
    <div class="cinema" :style="{ height: height }">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in cinemaList"
          :key="item.cinemaId"
          @click="goToInfo(item.cinemaId)"
        >
          <div class="left-cinema">
            <p class="cinema-name">{{ item.name }}</p>
            <p class="cinema-address">{{ item.address }}</p>
          </div>
          <div class="right-locat">
            <p class="price">
              ￥<span>{{ item.lowPrice / 100 }}</span
              >起
            </p>
            <p>距离未知</p>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import Vue from "vue";
import { NavBar, Icon, DropdownMenu, DropdownItem } from "vant";
Vue.use(NavBar).use(Icon).use(DropdownMenu).use(DropdownItem);
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      height: 0,
      loading: false,
      finished: true,
      dropdownMenu: {
        district: "全城",
        getTicketMethod: "APP购票",
        recent: "最近去过",
      },
      districtList: [{ text: "全城", value: "全城" }],
      getTicketMethods: [
        { text: "APP购票", value: "APP购票" },
        { text: "前台兑换", value: "前台兑换" },
      ],
      recents: [
        { text: "最近去过", value: "最近去过" },
        { text: "离我最近", value: "离我最近" },
      ],
    };
  },
  computed: {
    ...mapState("cinemaModule", ["cinemaList", "copyCinemaList"]),
    ...mapState("cityModule", ["cityId", "cityName"]),
  },
  methods: {
    ...mapMutations("cinemaModule", ["districtChange"]),
    ...mapActions("cinemaModule", ["getCinemaData"]),
    onLoad() {},
    onClickLeft() {
      this.$router.history.push("/cinema/city");
    },
    onClickRight() {
      this.$router.history.push("/cinema/search");
    },
    goToInfo(id) {
      console.log(id);
      this.$router.history.push("/cinema/cinemainfo/" + id);
    },
  },
  mounted() {
    //设置根元素的高与屏幕显示区等高
    this.height = document.documentElement.clientHeight - 100 + "px";
    if (this.cinemaList.length === 0) {
      //stroe内部actions异步处理属性中要实现getCinemaData方法来发送ajax请求，获取后台数据
      //this.$store.state.cityId参数传递
      let ps = this.getCinemaData(this.cityId);
      ps.then(() => {
        this.$nextTick(() => {
          new BetterScroll(".cinema", {
            scrollbar: {
              fade: true, //滚动时显示滚动条，不滚动时隐藏滚动条
            },
          });
          console.log(this.cinemaList);
          // 填充筛选地区选项
          let quChong = [];
          this.copyCinemaList.forEach((item) => {
            if (!quChong.includes(item.district.name)) {
              quChong.push(item.district.name);
              this.districtList.push({
                text: item.district.name,
                value: item.district.name,
              });
            }
          });
        });
      });
    } else {
      //cinemaList状态中有数据，说明已经请求过数据了。
    }
    //axios的请求就要转移到store中的actions属性中处理
  },
};
</script>

<style scoped lang='scss'>
.cinema {
  overflow: hidden;
  /* 溢出隐藏才能全better-scroll起作用 */
  position: relative;
  /* 让滚动条相对于cinema定位 */
  .van-list {
    .van-cell {
      .van-cell__value {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-cinema {
          font-size: 12px;
          width: 250px;
          overflow: hidden;
          .cinema-name {
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 16px;
          }
          .cinema-address {
            color: #797d82;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .right-locat {
          p {
            width: 70px;
            font-size: 12px;
          }
          .price {
            color: #ff9462;
            span {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>